<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const isCollapse = ref(false)
const handleSelect = (key: string) => {
    router.push({
        path: key,
    })
}
</script>

<template>
    <div class="aside">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :value="false">expand</el-radio-button>
            <el-radio-button :value="true">collapse</el-radio-button>
        </el-radio-group>
        <el-menu :default-active="router.currentRoute.value.path" class="el-menu-vertical-demo" :collapse="isCollapse"
            @select="handleSelect">
            <el-menu-item index="/">
                <el-icon>
                    <House />
                </el-icon>
                <template #title>首页</template>
            </el-menu-item>
            <el-menu-item index="/oilPrice">
                <el-icon>
                    <Mug />
                </el-icon>
                <template #title>油价</template>
            </el-menu-item>
            <el-menu-item index="/goldPrice">
                <el-icon>
                    <GoldMedal />
                </el-icon>
                <template #title>金价</template>
            </el-menu-item>
            <el-menu-item index="/topSearch">
                <el-icon>
                    <Trophy />
                </el-icon>
                <template #title>热搜</template>
            </el-menu-item>
            <el-menu-item index="/blog">
                <el-icon>
                    <Document />
                </el-icon>
                <template #title>博客</template>
            </el-menu-item>
            <el-menu-item index="/knowledgeBase">
                <el-icon>
                    <Document />
                </el-icon>
                <template #title>知识库</template>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>
